﻿@section scripts{
    <link href="~/Content/js/vendors/jsPanel/jquery.jspanel.css" rel="stylesheet" />
    <script src="~/Content/js/vendors/jsPanel/jquery.jspanel.js"></script>
    <script type="text/javascript">
        //图标数组
        var icon = new Array("entypo-target", "entypo-flag", "entypo-bookmark", "entypo-pencil", "entypo-feather", "entypo-keyboard", "entypo-bell", "entypo-direction", "entypo-cup", "entypo-trash", "entypo-doc", "entypo-docs", "entypo-doc-landscape", "entypo-doc-text", "entypo-newspaper", "entypo-book", "entypo-tools", "entypo-shareable", "entypo-odnoklassniki-rect", "entypo-bag");
        //颜色数组
           
        var color = new Array('#f87aa0', '#5bc0de',  '#f4cc13', '#d24d33','#00a9ae;','#b22c46', '#33a3dc', '#00a6ac', '#c77eb5', '#2a5caa', '#817936', '#f7acbc', '#596032', '#f36c21', '#76becc', '#45b97c', '#87481f', '#444693', '#feeeed', '#aa363d', '#69541b', '#867892', '#005831', '#293047', '#78cdd1', '#7bbfea', '#72777b', '#decb00', '#d71345', '#b2d235', '#fcf16e', '#543044', '#d1c7b7');
        var oTable;
        var ProInfo;
        var Tagid = "";
        var tagstr = [];
        var ID,NAME;
        var tabwhere = "1";
        $(function () {
            //初始化laydate插件
            layui.use(["layer", "laydate"], function () {
                var laydate = layui.laydate;
                laydate.render({
                    trigger: 'click', //采用click弹出
                    elem: '#BEGINTYPE',   //项目开始日期
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#ENDTYPE',   //结束日期
                    trigger: 'click', //采用click弹出
                    type: 'datetime'
                });
            })
            ID = QueryString("ID");
            NAME = QueryString("NAME");
            $("#proname").text(decodeURI(NAME));
            $("#timelineexample").slimScroll({
                height: "600px",
            });
            
            $("#project").removeClass("right-menu").addClass("right-menu-active");
            $("#project").removeClass(" responsive-admin-menu")
            $(".responsive-admin-menu").attr("style","display:none")
            $("#show").removeClass("content-wrapper")
            $("#show").addClass("content-wrappernew")
            //$(".responsive-admin-menu").attr("style","display:none;")
            $("#Event").addClass("active");
            layui.use('element', function () {
                var element = layui.element;

                //…
            });
            LoadTag();
            loadtable();
        });
        function loadtable() {
            oTable = $('#pTable').dataTable({
                 "oLanguage": {
                     "sUrl": "@Url.Content("~/Content/js/vendors/DataTables/dataTables.chinese.txt")"
                },
                "destroy": true,
                "bServerSide": true,
                "sAjaxSource": path + "Event/GetEventList",      //mvc后台ajax调用接口
                'bPaginate': true,                      //是否分页。
                "bProcessing": true,                    //当datatable获取数据时候是否显示正在处理提示信息。
                'bFilter': false,                       //是否使用内置的过滤功能。
                "bSort": false,
                "iDisplayLength": 10,                   //每页显示的行数
                "bLengthChange": false,                 //允许用户从一个选择菜单中格式化页面大小(改变页面显示的数据数量)
                'sPaginationType': 'full_numbers',      //分页样式
                "fnServerParams": function (aoData) {
                    aoData.push({ "name": "PROJECTID", "value": ID }, { "name": "BEGINTYPE", "value": $("#BEGINTYPE").val() }, { "name": "ENDTYPE", "value": $("#ENDTYPE").val() },{ "name": "Tagid", "value": Tagid });
                },
                "aoColumns": [
                    { "mData": "Id", "sTitle": "主键", "bVisible": false, "bSearchable": false, "bSortable": false },
                    {
                        "mData": "NUMBER", "sTitle": "", "sWidth": "3%",
                        "mRender": function (data, type, full) {
                            var html = "";

                            html = "<span class='num'>" + full.NUMBER+"</span>";
                            return html;
                        } },
                    { "mData": "EVENTNAME", "sTitle": "事件名称", "sWidth": "30%" },
                    { "mData": "MANAGER.USERNAME", "sTitle": "参与人", "sWidth": "10%" },
                    {
                        "mData": "", "sTitle": "标签", "sWidth": "10%",
                        "mRender": function (data, type, full) {
                            var html = "";
                            html = "<span class='label'style='font-size: 12px;background-color:" + color[tagstr.indexOf(full.TAG.NAME) % 20]+"'>" + full.TAG.NAME+"</span>";
                            return html;
                        } },
                    { "mData": "DEPICT", "sTitle": "描述", "sWidth": "30%" },
                    { "mData": "EVENTTIMETYPE", "sTitle": "时间点", "sWidth": "10%" },
                    {
                        "sTitle": "操作",
                        "sWidth": "10%",
                        "mRender": function (data, type, full) {
                            var html = "";
                            html += "<a href='#' title='编辑' onclick='Edit(\"" + full.Id + "\")'><i class='fa fa-edit' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            html += "<a href='#' title='删除' onclick='Delete(\"" + full.Id + "\",\"" + full.EVENTNAME + "\")'><i class='fa fa-trash-o' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            html += "<a href='#' title='查看' onclick='View(\"" + full.Id + "\")'><i class='fa fa-eye' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            return html;
                        }
                    }
                ]
            });
        }
        // 获取传参id
        function QueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) { return unescape(r[2]); }
            return null;
        }
        $("#selectbtn").click(function () {
            if (tabwhere == "1") {
                loadtable();
            }
            else {
                Loadli();
            }
        });
        $("#eventtable").click(function () {
            tabwhere = "1";
            loadtable();
        });
        $("#eventli").click(function () {
            tabwhere = "2";
            Loadli();
        });
        //初始化事件列表
        function Loadli() {
            //$("#sel_LoadDEPARTMENT").html(html);
            //$("#sel_LoadDEPARTMENT").select2();
            $.ajax({
                url: path + "Event/GetEventTimeList",
                type: 'post',
                data: { "PROJECTID": ID, "BEGINTYPE": $("#BEGINTYPE").val(), "ENDTYPE": $("#ENDTYPE").val(),"Tagid":Tagid },
                dataType: "json",
                success: function (res) {
                    var str = '';
                    if (res != null) {
                        var ul = document.getElementById("tmtimeline");//获取下拉选对象
       
                        for (var i = 0; i < res.length; i++) {
                            var TAGNAME = "";
                            var TAG = res[i].TAG;
                            if (TAG!=null) {
                                TAGNAME = res[i].TAG.NAME;
                            }
                            str += "<li><time class='tmtime' datetime = " + res[i].EVENTTIMETYPE + "> <span>" + res[i].EVENTTIMETYPE.split(" ")[0] + "</span> <span>" + res[i].EVENTTIMETYPE.split(" ")[1] + "</span></time ><div class='tmicon' style='background-color:" + color[tagstr.indexOf(TAGNAME) % 20] + "'><i class='fa fa-1x " + icon[tagstr.indexOf(TAGNAME) % 20] + "'></i></div><div class='tmlabel'><h2>" + res[i].EVENTNAME + "</h2><span >" + res[i].EVENTNAME + ",参与人" + res[i].MANAGER.USERNAME + "</span><span class='label'style='font-size: 14px;float:right;background-color:" + color[tagstr.indexOf(TAGNAME) % 20] + "'>" + TAGNAME + "</span></div></li>";
                        }
                        ul.innerHTML = str;
                        return;
                    }
                }
            })
        }
        function TagColor(TAGNAME) {
            var ifcz = false;
            for (var j = 0; j < tagstr.length; j++) {
                if (tagstr[j] == TAGNAME) {
                    ifcz = true;
                    break;
                }
            }
            if (!ifcz) {
                tagstr.push(TAGNAME);
            }

        };
        //初始化物联网选择控件
        function LoadTag() {
            //$("#sel_LoadDEPARTMENT").html(html);
            //$("#sel_LoadDEPARTMENT").select2();

            $.ajax({
                url: path + "Event/GetAllTagSel",
                type: 'post',
                data: { "PROJECTID": ID},
                dataType: "json",
                success: function (res) {
                    var str = '';
                    if (res != null) {
                        var ul = document.getElementById("TAG");//获取下拉选对象
                        str += "<div value='' class='icon-hover'> <i class='fa2 fa-1x entypo-layout'></i><span class='i-name'  > 全部</span></div>";
                        for (var i = 0; i < res.length; i++) {
                            var name = res[i].name;
                            var value = res[i].value;
                            TagColor(name);
                            str += "<div  value=" + value + " class='icon-hover'> <i class='fa2 fa-1x " + icon[i % 20] +"'></i><span class='i-name' >" + name + "</span></div>";
                        }
                        ul.innerHTML = str;
                        return;
                    }
                }
            })
        }
        $(document).on('click', '.icon-hover', function (e) {
            Tagid = $(this).attr("value");
            if (tabwhere == "1") {
                loadtable();
            }
            else {
                Loadli();
            }
            $("#TAG div").attr("style", "background-color: #949fb2");
            $(this).attr("style","background-color:#0685f1");
        });
        /*添加*/
        function Add() {
            var parturl = path + "Event/Create/"
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'Add',
                headerTitle: "事件信息添加",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 430 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }
        /*编辑*/
        function Edit(Id) {
            var parturl = path + "Event/Update/" + Id;
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'Edit',
                headerTitle: "事件信息编辑",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 430 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }
        /*查看*/
        function View(Id) {
            var parturl = path + "Event/Detail/" + Id;
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'View',
                headerTitle: "事件信息查看",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 430 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }

        /*删除*/
        function Delete(Id, name) {
            parent.confirm("<div class='notyContent'>确定要删除【" + name + "】的信息吗？</div>",
                "project", function () {
                    $.ajax({
                        url: path + "Event/Delete/" + Id,
                        success: function (result) {
                            if (result == "true") {
                                noty({ text: "删除成功！", type: "success", layout: "topCenter", timeout: 2000 });
                                oTable.fnDraw();
                            } else {
                                noty({ text: "删除失败！", type: "error", layout: "topCenter", timeout: 2000 });
                            }
                        }
                    });
                }, null,
                '确定', '取消');
        }
        function AlertInfo(content, typeInfo) {
            noty({ text: content, type: typeInfo, layout: "topCenter", timeout: 2000 });
            if (typeInfo == 'success') {
                ProInfo.close();
                oTable.fnDraw();
            }
        };
    </script>
}
<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
    <div class="cbp-hsinner">
        <ul class="cbp-hsmenu">
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </div>
    <div class="cbp-hsmenubg"></div>
</nav>

<div class="row" id="powerwidgets" style="padding-left:5px;padding-right:5px">
    <div class="col-md-12 bootstrap-grid sortable-grid ui-sortable">
        <div class="powerwidget powerwidget-sortable" id="datatable-basic-init" data-widget-editbutton="false" role="widget" style="">
            <div class="inner-spacer">
                <div id="table-1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                    <div class="row orb-form">
                        <div class="col-xs-4">
                            <div class="row">
                                <section class="col col-6">
                                    <label class="input">
                                        <input type="text" name="BEGINTYPE" id="BEGINTYPE" placeholder="开始时间" class="hasDatepicker">
                                        <i class="icon-append fa fa-calendar"></i>
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="input">
                                        <i class="icon-append fa fa-calendar"></i>
                                        <input type="text" name="ENDTYPE" id="ENDTYPE" placeholder="结束时间" class="hasDatepicker">
                                    </label>
                                </section>
                            </div>
                        </div>
                        
                        <div class="col-xs-2">
                            <button type="button" id="selectbtn" class="btn btn-default">
                                <i class="fa fa-eraser"></i>&nbsp;&nbsp;查询
                            </button>
                            <button type="button" class="btn btn-info" onclick="Add()">
                                <i class="fa fa-eraser"></i>&nbsp;&nbsp;新增
                            </button>
                        </div>
                       
                        <div class="col-xs-5" style="float:right;">
                            <div  style="float:right;height:100%;padding-right:10px" id="TAG"></div>
                        </div>
                    </div>
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li id="eventtable" class="layui-this">表格展示</li>
                            <li id="eventli">时间轴展示</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show"><table class="table table-striped table-hover dataTable" id="pTable" aria-describedby="table-1_info"></table></div>
                            <div class="layui-tab-item" >
                                <div class="row" id="powerwidgets">
                                    <div class="col-md-12 bootstrap-grid sortable-grid ui-sortable">
                                        <div class="powerwidget blue powerwidget-sortable">
                                            <header role="heading">
                                                <h2>里程碑事件</h2>
                                                </header>
                                        </div>
                                        <!-- New widget -->
                                        <div id="timelineexample" data-widget-editbutton="false" role="widget">

                                            <div class="inner-spacer" role="content">
                                                <div class="activity-block">
                                                    <ul class="tmtimeline" id="tmtimeline"></ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        <!-- End Widget -->

                                    </div>
                                    <!-- /Inner Row Col-md-12 -->
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
